<template>
  <div class="nav main">
    <el-menu :default-active="onRoutes" class="el-menu-demo" text-color="#333" mode="horizontal" @select="handleSelect"
      active-text-color="#333">
      <el-menu-item index="/index">首页</el-menu-item>
      <el-submenu index="1">
        <template slot="title">
          <!-- <span class="sub-title">办事指南</span> -->
          <span class="sub-title">新闻动态</span>
        </template>
        <el-menu-item :index="`11${index}`" v-if="businessGuide.length" v-for="(item, index) in businessGuide"
          :key="index">
          <div @click="goDeatrc(item, 1)">{{ item.name }}</div>
        </el-menu-item>
      </el-submenu>
      <el-menu-item index="/JobHunting">个人求职</el-menu-item>
      <!-- <el-menu-item index="70">
        <span @click="qyfw"></span>
        企业服务
      </el-menu-item> -->
      <el-menu-item index="104">
        <span @click="qyfw">企业服务</span>
      </el-menu-item>
      <!-- <el-submenu index="3">
        <template slot="title">
          <span class="sub-title">企业招聘</span>
        </template>
        <el-menu-item :index="`33${index}`" v-if="companyService.length" v-for="(item, index) in companyService"
          :key="index">
          <div @click="goDetail(item, 3)">{{ item.name }}</div>
        </el-menu-item>
      </el-submenu> -->
      <!-- <el-menu-item index="/jobFair">招聘会</el-menu-item> -->
      <!-- <el-menu-item index="15" @click="goDeatrc">人才政策</el-menu-item> -->
      <!-- <el-menu-item index="/infoList?id=18&type=2">办事指南</el-menu-item> -->
      <el-submenu index="2">
        <template slot="title">
          <span class="sub-title">人才服务</span>
        </template>
        <el-menu-item :index="`22${index}`" v-if="talentService.length" v-for="(item, index) in talentService"
          :key="index">
          <div @click="goDetail(item, 2)">{{ item.name }}</div>
        </el-menu-item>
      </el-submenu>
      <el-menu-item index="100">
        <span @click="xmsb">项目申报</span>
      </el-menu-item>
      <el-submenu index="5">
        <template slot="title">
          <span class="sub-title">人才政策</span>
        </template>
        <el-menu-item :index="`55${index}`" v-if="talentPolicy.length" v-for="(item, index) in talentPolicy"
          :key="index">
          <div @click="goDeatrc(item, 5)">{{ item.name }}</div>
        </el-menu-item>
      </el-submenu>
      <!-- <el-menu-item index="/infoList?id=15&type=2&ptan=1">人才政策</el-menu-item> -->

      <!-- 
      <el-submenu index="4">
        <template slot="title">
          <span class="sub-title">劳务派遣</span>
        </template>
        <el-menu-item :index="`44${index}`" v-if="laborDispatch.length" v-for="(item, index) in laborDispatch"
          :key="index">
          <div @click="goDetail(item, 4)">{{ item.name }}</div>
        </el-menu-item>
      </el-submenu> -->
      <el-menu-item index="/connection">
        <span @click="lxwm">联系我们</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
import { getNavList } from '../../api/info';
export default {
  data () {
    return {
      // 办事指南
      businessGuide: [],
      // 人才服务
      talentService: [],
      // 企业服务
      companyService: [],
      // 劳务派遣
      laborDispatch: [],
      //人才政策
      talentPolicy: [],
      url: ''
    };
  },
  created () {
    console.log(process.env.VUE_APP_URL, 'process.env.VUE_APP_URL')
    this.url = process.env.VUE_APP_URL || ''
    this.getNav(1);
    this.getNav(2);
    this.getNav(3);
    this.getNav(4);
    this.getNav(5);
  },
  computed: {
    onRoutes () {
      return this.$route.path;
    }
  },
  methods: {
    handleSelect (a, b) {
      if (b.length == 1) {
        this.$router.push(a);
      }
    },
    getNav (code) {
      getNavList(code).then((data) => {
        if (data.success) {
          switch (code) {
            case 1:
              this.businessGuide = data.data || [];
              localStorage.setItem(`nav${code}`, JSON.stringify(this.businessGuide));
              break;
            case 2:
              this.talentService = data.data || [];
              localStorage.setItem(`nav${code}`, JSON.stringify(this.talentService));
              break;
            case 3:
              this.companyService = data.data || [];
              localStorage.setItem(`nav${code}`, JSON.stringify(this.companyService));
              break;
            case 4:
              this.laborDispatch = data.data || [];
              localStorage.setItem(`nav${code}`, JSON.stringify(this.laborDispatch));
              break;
            case 5:
              this.talentPolicy = data.data || [];
              localStorage.setItem(`nav${code}`, JSON.stringify(this.talentPolicy));
              break;
          }
        } else {
          this.$message.error(`${data.msg}`);
        }
      });
    },
    goDeatrc (item, code) {
      this.$router.push({
        path: `/infoList`,
        query: {
          id: item.id,
          type: 2,
          ptan: '1'
        }
      });
      localStorage.setItem(`navCurrent`, localStorage.getItem(`nav${code}`));
    },
    goDetail (item, code) {
      switch (item.type) {
        case 1: // 单文章
          this.$router.push({
            path: `/infoList`,
            query: {
              id: item.id,
              type: 2
            }
          });
          localStorage.setItem(`navCurrent`, localStorage.getItem(`nav${code}`));
          break;
        case 2: // 文章列表
          this.$router.push({
            path: `/infoList`,
            query: {
              id: item.id,
              type: 2
            }
          });
          localStorage.setItem(`navCurrent`, localStorage.getItem(`nav${code}`));
          break;
        case 3: // 超链接
          window.open(item.url, '_blank');
          break;
      }
    },
    xmsb () {
      window.location.href = this.url + "/b/project"
    },
    lxwm () {
      // window.location.href = this.url + '/contact'
    },
    qyfw () {
      window.location.href = this.url + '/company'
    }

  }
};
</script>

<style lang="css" scoped>
.nav {
    height: 50px;
    background: #318ef8;
    opacity: 1;
    margin-bottom: 16px;
}
.el-menu {
    display: flex;
    text-align: center;
    border: none;
    /* width: 100%; */
    justify-content: space-between;
    height: 50px;
    width: 1200px;
    margin: 0 auto;
    /* background-image: linear-gradient(rgb(48, 139, 246), rgb(60, 166, 254)); */
    background: #318ef8;
}
.el-menu .el-menu-item {
    width: 64px;
    height: 50px;
    line-height: 50px;
    margin: 0 45px;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(34, 34, 34, 1);
    opacity: 1;
    padding: 0 !important;
}
.el-menu--popup .el-menu-item {
    width: auto;
    margin: 0;
    text-align: center;
    height: 40px;
    line-height: 40px;
}

.sub-title {
    font-size: 16px;
    color: #333;
    border: none;
}
a {
    color: #222222;
}
.el-menu .el-menu-item:not(.is-disabled):focus,
.el-menu .el-menu-item:not(.is-disabled):hover {
    outline: none;
    color: #1893fc !important;
    /* background: #1893fc; */
}
.nav /deep/ .el-menu .is-opened {
    color: #000;
}
.el-menu--horizontal {
    color: #000 !important;
}
</style>